<template>
    <div class="Playlist-out">
        <div>
 <h2 style="color:black">搜索   <span style="font-size:18px">{{$route.query.searchWord}}</span> </h></h2>
 <span style="padding-top:20px; font-size:12px; color:#ccc">最多仅展示近100首</span>
        </div>
       
         <div class="Table-top">
                <li @click="indexChange=1" :class="{active:indexChange==1}">单曲</li>
                <li @click="indexChange=2" :class="{active:indexChange==2}">歌手</li>
                <li @click="indexChange=3" :class="{active:indexChange==3}">歌单</li>
                <li @click="indexChange=4" :class="{active:indexChange==4}">视频</li>
                <li @click="indexChange=5" :class="{active:indexChange==5}">专辑</li>
         </div>
        <div class="allPlayer">
            <div class="allPlayer-main">
            <i class="el-icon-video-play"></i>
            播放全部
            <i class="el-icon-plus"></i>
            </div>
            <div class="allPlayer-dow">
            <i class="el-icon-download"></i>
             下载全部
            </div>
        </div>
       <titleTable
        :Songlist=songs
        />
    
    </div>
</template>

<script>
var arr3=[]
import dayjs from "dayjs"
import titleTable from "@/components/MusicDetails/subpackage/titleTable"
export default {
   name:"result",
   components:{
   titleTable
   },
    data(){
        return{
             indexChange:1,
             songs:[],
             songCount:0
        }
    },
    methods:{
      async  getCloudsearch(){  //获取搜索结果
      this.getRecords()
           const {data:res} =await this.$request("/cloudsearch",{
               keywords:this.$route.query.searchWord,
               type:1,
               limit:100
           })
           console.log(res)
           if(res.code!==200) return 
           res.result.songs.forEach(x=>{
          x.dt=dayjs(x.dt).format('mm:ss')
        })
            this.songCount=res.result.songCount
           this.songs=res.result.songs
           
        },
        getRecords(){ //存储搜索记录
          
        // if(arr3.length<1){
        //   arr3=this.$Store.state.homePage.recordslist
        // }
        arr3.unshift(this.$route.query.searchWord)
        //   localStorage.setItem("records",JSON.stringify(arr3))
          this.$Store.commit("searchRecords",arr3)
        
        }
    },
    mounted(){
         this.getCloudsearch()

        //  localStorage.setItem("records",this.$route.query.searchWord)
    },
    watch:{
         $route(){
             console.log("第一次")
         this.getCloudsearch()
     }
    }
}
</script>

<style lang="less" scoped>
.Playlist-out{
  width: 1300px;
  display: flex;
  flex-direction:column;
  margin:70px 90px;
 .Table-top{
      width:100%;
      height:60px;
      display:flex;
      align-items:center;
      li{
          width:60px;
          height:40px;
          line-height:40px;
          text-align:center;
      }
             .active{
          border-bottom:3px solid #c00000;
          font-size:20px;
          color:#000;
          font-weight:600;
      }
  }
  .allPlayer{
      margin:30px 0;
      width:100%;
      display:flex;
      .allPlayer-main{
          margin-right:20px;
          width:120px;
          height:40px;
          line-height:40px;
          text-align:center;
          color:#fff;
          background-color:#c00000;
          border-radius:10px;

      }
        .allPlayer-dow{
          width:120px;
          height:40px;
          line-height:40px;
          text-align:center;
          color:#aaa;
          background-color:#fff;
          border-radius:10px;
          border:1px solid #ccc;
      }
  }
}
    
</style>